{% extends 'base.html' %}

{% block title %}Todo List - Django Learning{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <h1>Todo List</h1>
        {% if todos %}
            <ul class="list-group">
                {% for todo in todos %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span {% if todo.completed %}style="text-decoration: line-through;"{% endif %}>
                            {{ todo.title }}
                        </span>
                        <span>
                            {% if todo.completed %}
                                <span class="badge bg-success">Completed</span>
                            {% else %}
                                <span class="badge bg-warning text-dark">Pending</span>
                            {% endif %}
                        </span>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="text-muted">No todos available. Add some tasks to get started!</p>
        {% endif %}
    </div>
</div>
{% endblock %}